<template>
    <div>
        Groups
        <div style="margin-top: 10px">
            <div class="group-item" :key="index2" v-for="(item,index2) in groups">
                <div class="group-title">
                    {{ item.title.charAt(0) }}
                </div>
                <div class="group-title2">
                    {{ item.title }}
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ChatGroups",
    data() {
        return {
            groups: [
                {
                    title: "Gennral"
                },
                {
                    title: "Rennral"
                },
                {
                    title: "Project A"
                },
                {
                    title: "Project B"
                },
            ]

        }
    },
    methods: {}
}
</script>

<style scoped>
.contact-group {
    margin-top: 30px;
}


.group-item {
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: center;
    border-top: #e9eaee 1px solid;
    transition: all ease-in-out 300ms;
    cursor: pointer;

}

.group-item:hover {

    background-color: white;
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
}

.group-title {
    background-color: #cfd6f6;
    color: #556ee6;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    line-height: 30px;
    text-align: center;
}

.group-title2 {
 margin-left: 10px;
}
</style>